<template>
  <div>
    <router-link
      :to="'/home/newslist/' + item.id"
      class="newsinfo-container"
      v-for="(item, i) in list"
      :key="i"
    >
      <div>
        <img :src="item.url" alt="" />
      </div>

      <div class="second">
        <h3 class="title">{{ item.title }}</h3>
        <p class="info">
          <span>发表时间：{{ item.time | dateFormat("YYYY-MM-DD") }}</span
          >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <span>点击：{{ item.count }}</span>
        </p>
      </div>
    </router-link>
  </div>
</template>

<script>
import Cat from "../../images/cat.png";
import Beauty from "../../images/beauty.png";
import meng from "../../images/meng.png";
import orange from "../../images/orange.png";
import caomei from "../../images/caomei.png";
import smile from "../../images/smile.png";

export default {
  data() {
    return {
      list: [
        {
          id: 1,
          url: Cat,
          time: new Date(),
          count: "10次",
          title: "一只可爱的小猫正在沉睡",
        },
        {
          id: 2,
          url: Beauty,
          time: new Date(),
          count: "100次",
          title: "古力娜扎的发型引发热议",
        },
        {
          id: 3,
          url: meng,
          time: new Date(),
          count: "376次",
          title: "今天你微笑了吗？",
        },
        {
          id: 4,
          url: orange,
          time: new Date(),
          count: "7836次",
          title: "这橘子可真好吃",
        },
        {
          id: 5,
          url: caomei,
          time: new Date(),
          count: "5636次",
          title: "这草莓可真好吃",
        },
        {
          id: 6,
          url: smile,
          time: new Date(),
          count: "1000次",
          title: "开心生活每一天",
        },
        {
          id: 7,
          url: smile,
          time: new Date(),
          count: "1000次",
          title: "开心生活每一天",
        },
      ],
    };
  },
  methods: {},
  created() {},
};
</script>

<style scoped>
.newsinfo-container {
  display: flex;
  justify-content: space-around;
  padding-left: 30px;
  padding-top: 15px;
  padding: 15px 30px 0;
  border-bottom: 1px solid #ccc;
}

img {
  width: 60px;
  height: 60px;
}
.title {
  font-size: 15px;
  text-align: center;
  color: pink;
  margin: 15px 0;
}
.info {
  color: #26a2ff;
  display: flex;
  justify-content: space-between;
}
</style>